<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阳光运动</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.2.min.js"></script>
<% String keyword=request.getParameter("category"); %>
<script type="text/javascript">
     window.onload=function(){
	 xmlhttp = new XMLHttpRequest();
	 xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState==4) {
		  	    if(xmlhttp.status==200) {
		  	    	  var respTxt = xmlhttp.responseText;
				      window.eval("var arr="+respTxt);
				      var html='';
				      for(var i=0;i<arr.length;i++){
				    	  html+='<div class="imgAndInfo"><div class="imgInimgAndInfo"><img width="100px" class="bigImg" src="'+arr[i].url+'"/></div><div class="infoInimgAndInfo"><div class="productTitle"><a href="/OnlineBookStore/index/bookdetail.jsp?id='+arr[i].book_id+'"><strong>'+arr[i].title+'&nbsp; </strong></a></div><div class="productSubTitle">'+arr[i].description+'</div><div class="productSubTitle2"><span>作者:<a>'+arr[i].author+'</a></span>&nbsp;出版社:<a>'+arr[i].publisher+'</a>&nbsp;出版时间:<a>'+arr[i].publishint_time+'</a></div><div class="productPrice"><div class="productPriceDiv"><div class="originalDiv"><span class="originalPriceDesc">价格</span><span class="originalPriceYuan">¥</span><span class="originalPrice">'+arr[i].book_price+'</span></div></div></div></div><div style="clear:both"></div></div>';
				      }
				      document.getElementById("c").innerHTML=html;
			    }
		     }
	 }
	 
	 xmlhttp.open("get","<%=request.getContextPath()%>/ShowCategory?category=<%=keyword%>");
	 xmlhttp.send(null); 
}
</script>
<script type="text/javascript">
    function searchfunc(key){
    	var keyword=$("#keyword").val();
    	if(keyword.length==0){
    		keyword=key;
    	}
    	window.location.href='<%=request.getContextPath()%>/index/search.jsp?keyword='+keyword; 
    }
</script>
</head>
<style>
	.c{
		display:none
	}
	body {
		font-size: 12px;
		font-family: Arial;
		margin: 0px;
		padding: 0px;
	}
		
	a {
		color: #999;
	}
	
	.greenColor {
		color: darkgreen !important;
	}
	
	nav.top a:hover {
		color: darkgreen;
		text-decoration: none;
	}
	
	nav.top {
		background-color: ghostwhite;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #e7e7e7;
		margin: 0px;
	}
	
	nav.top span,
	nav.top a {
		color: #999;
		margin: 0px 0px 0px 10px;
		text-decoration: none;
	}
	
	.pull-right {
		float: right;
	}
	
	div.searchDiv {
		background-color: cadetblue;
		width: 400px;
		margin: 0px auto;
		padding: 1px;
		height: 40px;
		display: block;
	}
	
	div.searchDiv input {
		width: 275px;
		border: 1px solid transparent;
		height: 36px;
		margin: 1px;
		outline: none;
	}
	
	div.searchDiv button {
		width: 110px;
		border: 1px solid transparent;
		background-color: cadetblue;
		color: white;
		font-size: 20px;
		font-weight: bold;
	}
	
	div.searchBelow {
		margin-top: 3px;
		margin-left: -20px;
	}
	
	div.searchBelow span {
		color: #999;
	}
	
	div.searchBelow a {
		padding: 0px 20px 0px 20px;
		font-size: 14px;
		text-decoration: none;
	}
	
	img.logo {
		position: absolute;
		left: 0px;
		top: 30px;
		z-index: -1;
	}
	
	body {
		font-size: 12px;
		font-family: Arial;
	}
	
	a {
		color: #999;
	}
	
	a:hover {
		text-decoration: none;
		color: cadetblue;
	}
	
	* {
		margin: 0;
		padding: 0;
	}
	
	.centerblock {
		top: 100px;
		margin: auto;
		margin-top: 50px;
		width: 935px;
		height: 300px;
		border: 1px solid silver;
	}
	
	.centerblock_left {
		width: 199px;
		height: 300px;
		border-right: 1px solid cadetblue;
		float: left;
	}
	
	#centerblock_right {
		float: left;
		width: 735px;
		height: 300px;
		overflow: hidden;
		position: relative;
	}
	
	#list {
		width: 4200px;
		height: 300px;
		position: absolute;
		z-index: 1;
	}
	
	#list img {
		width: auto;
		height: 100%;
	}
	
	.listmenu {
		/*border: 1px solid silver;*/
		/*left: 20px;*/
	}
	
	.listmenu li {
		list-style: none;
		padding-left: 20px;
		height: 31.2px;
		line-height: 31.2px;
		font-size: 15px;
	}
	
	.listmenu li span {
		float: right;
		margin-right: 10px;
	}
	
	.listmenu li>a {
		text-decoration: none;
		color: #3a3a3a;
	}
	
	.listmenu li:hover {
		background-color: whitesmoke;
		color: cadetblue;
	}
	
	.listmenu li:hover>a {
		color: cadetblue;
	}
	
	.listmenu>li>a:hover {
		text-decoration: underline;
	}
	
	.listmenu_child_left {
		position: relative;
		float: left;
		padding-left: 20px;
		width: 530px;
		height: 300px;
	}
	
	.listmenu_child_right {
		position: relative;
		float: left;
		width: 249px;
		height: 300px;
		border-left: 1px solid silver;
	}
	
	.listmenu_child_left_top_title {
		position: relative;
		width: 530px;
		height: 35px;
		line-height: 35px;
		margin-top: 5px;
		color: black;
	}
	
	.span1 {
		position: absolute;
		bottom: 0;
		float: left;
		font-size: 18px;
		left: 0px;
		color: black;
	}
	
	.span2 {
		position: absolute;
		bottom: 0;
		float: right;
		font-size: 13px;
		right: 8px;
		color: black;
	}
	
	.listmenu_child_left_a {
		margin-right: 25px;
		line-height: 25px;
	}
	
	.listmenu_child_left_a>a {
		text-decoration: none;
		font-size: 14px;
		margin-right: 20px;
	}
	
	.colororg {
		color: cadetblue;
	}
	
	.colorgray {
		color: gray;
	}
	
	.listmenu_child_right_title {
		position: relative;
		text-align: center;
		font-size: 14px;
		color: black;
		top: 10px;
	}
	
	#buttons {
		position: absolute;
		height: 10px;
		width: 100px;
		z-index: 2;
		/*将buttons放在list上层*/
		bottom: 20px;
		right: 250px;
	}
	
	#buttons span {
		cursor: pointer;
		float: left;
		border: 1px solid #fff;
		border-radius: 50%;
		height: 10px;
		width: 10px;
		margin-right: 5px;
		background: #E98352;
	}
	
	#buttons .on {
		background: #474550;
	}
	
	.arrow {
		display: none;
		cursor: pointer;
		line-height: 40px;
		text-align: center;
		font-size: 30px;
		/*设置箭头的大小*/
		width: 40px;
		height: 40px;
		position: absolute;
		z-index: 2;
		/*将arrow放在list上层*/
		top: 180px;
		color: #fff;
		background: #474550;
	}
	
	.arrow:hover {
		background-color: #E98352;
		text-decoration: none;
	}
	
	#centerblock_right:hover .arrow {
		display: block;
		text-decoration: none;
	}
	
	#pre {
		left: 20px;
	}
	
	#next {
		right: 20px;
	}
	
	.oneSpan {
		padding: 10px 0;
	}
	
	.author {
		padding: 0 20px;
		height: 24px;
		line-height: 24px;
		overflow: hidden;
		color: #aaa;
	}
	
	.price {
		padding-left: 20px;
		height: 36px;
		line-height: 16px;
		font-family: "Arial";
		font-size: 14px;
		position: relative;
	}
	
	.rob {
		color: #c30;
		float: left;
		overflow: hidden;
		margin-right: 12px;
		font-weight: bold;
	}
	
	.name {
		height: 44px;
		line-height: 22px;
		position: absolute;
		overflow: hidden;
		top: 9px;
		left: 145px;
	}
	
	.product_ul {
		width: 800px;
		padding-top: 25px;
	}
	
	.div-inline {
		display: inline;
		width: 180px;
		height: 300px;
	}
	
	div.imgAndInfo {
		margin: 40px 20px;
		border:1px;
		background-color:ghostwhite;
		border-radius: 15px;
	}
	
	div.imgInimgAndInfo {
		float: left;
	}
	
	div.imgAndInfo img.bigImg {
		padding: 20px;
		width: 200px;
		height: 200px;
	}
	
	div.infoInimgAndInfo {
		padding: 0px 20px;
		overflow: hidden;
	}
	
	div.infoInimgAndInfo div.productTitle {
		color: black;
		font-size: 16px;
		font-weight: bold;
		margin: 0px 10px;
	}
	
	div.infoInimgAndInfo div.productSubTitle {
		color: gray;
		font-size: 16px;
		margin: 0px 10px;
	}
	
	div.infoInimgAndInfo div.productSubTitle2 {
		color: cadetblue;
		font-size: 12px;
		margin: 10px 10px;
	}
	
	div.infoInimgAndInfo div.juhuasuan {
		background-color: #2DA77A;
		color: white;
		text-align: center;
		line-height: 40px;
		margin-top: 10px;
	}
	
	div.infoInimgAndInfo span.juhuasuanBig {
		font-size: 18px;
		font-weight: bold;
		font-family: 黑体;
	}
	
	div.infoInimgAndInfo span.juhuasuanTime {
		color: #FFC057;
		font-weight: bold;
	}
	
	div.infoInimgAndInfo div.productPriceDiv {
		padding: 10px;
		color: #666666;
	}
	
	div.infoInimgAndInfo div.gouwujuanDiv {
		margin-top: 5px;
	}
	
	div.infoInimgAndInfo div.originalDiv {
		margin-top: 5px;
	}
	
	div.infoInimgAndInfo span.originalPriceDesc {
		font-size: 20px;
		color: cadetblue;
		display: inline-block;
		width: 68px;
	}
	
	div.infoInimgAndInfo span.originalPrice {
		font-family: Arial;
		font-size: 14px;
		color: #333333;
	}
	
	div.infoInimgAndInfo span.promotionPriceYuan {
		font-family: Arial;
		font-size: 18px;
		color: #C40000;
	}
	
	div.infoInimgAndInfo span.promotionPrice {
		color: #c40000;
		font-family: Arial;
		font-size: 30px;
		font-weight: bold;
	}
	
	div.infoInimgAndInfo span.promotionPriceDesc {
		color: #999999;
		display: inline-block;
		width: 68px;
		position: relative;
		left: 0px;
		top: -10px;
	}
	
	div.infoInimgAndInfo div.productNumber {
		color: #999999;
	}
	
	div.infoInimgAndInfo span.productNumberSettingSpan {
		border: 1px solid #999;
		display: inline-block;
		width: 43px;
		height: 32px;
		padding-top: 7px;
	}
	
	div.infoInimgAndInfo input.productNumberSetting {
		border: 0px;
		height: 80%;
		width: 80%;
	}
	
	div.productNumber span.num_add {
		background-position: -37px 0;
		top: 0;
	}
	
	div.productNumber span.updown {
		border: 1px solid #999;
		display: block;
		width: 20px;
		height: 14px;
		text-align: center;
		padding-top: 4px;
	}
	
	div.productNumber span.updownMiddle {
		height: 4px;
		display: block;
	}
	
	div.productNumber span.arrow {
		display: inline-block;
		width: 22px;
		height: 32px;
		vertical-align: top;
	}
	
	div.buyDiv {
		margin: 20px auto;
		text-align: center;
	}
	
	div.buyDiv button {
		display: inline-block;
		margin: 0px 10px;
		width: 180px;
		height: 40px;
	}
	
	button.buyButton {
		border: 1px solid whitesmoke;
		background-color: whitesmoke;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: cadetblue;
		font-family: arial;
	}
	
	button.addCartButton {
		border: 1px solid cadetblue;
		background-color: cadetblue;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: white;
		font-family: arial;
	}
	
	button.addCartButton span.glyphicon {
		font-size: 12px;
		margin-right: 8px;
	}
	
	a:hover {
		text-decoration: none;
	}
	
	.redColor {
		color: #C40000;
	}
	
	.boldWord {
		font-weight: bold;
	}
	
	div .messbox_info {
		display: inline-block;
		padding-right: 25px
	}
	
	div .messbox_info .title {
		display: inline-block
	}
	
	.product_main .sale_box .messbox_info .pinglun {
		clear: both
	}
	
	.product_main .sale_box .messbox_info .pinglun .t1 {
		float: left
	}
</style>

<body>
<div>

		<nav class="top">
			<a href="index.jsp" onclick=back()>首页</a>

			<span>欢迎来到阳光运动~</span>
			
			<%
			if(request.getSession().getAttribute("identity")!=null){
				int identity=(int)request.getSession().getAttribute("identity");
				if(identity==3){
					%>
					<a href="<%=request.getContextPath()%>/exit">退出登录</a>
					<span class="pull-right">
		            <a href="ShowOrder">查看订单</a>
					</span><%
				}
				else{%>
					<a href="<%=request.getContextPath()%>/exit">退出登录</a>
					<span class="pull-right">
		            <a href="orderlist.jsp">我的订单</a>
		            <a href="showcart">购物车</a>
					</span><%
				}
			}
			else{
			%>
				<a href="<%=request.getContextPath()%>/enter">请登录</a>
				<a href="<%=request.getContextPath()%>/register">免费注册</a><%
			}
			%>
			

		</nav>


		<div class="searchDiv ori" >
			<input type="text" placeholder="python 机器学习" name="keyword" id="keyword">
			<button id="btn" class="searchButton" type="submit" onclick=searchfunc() >搜索</button>
			<div class="searchBelow">
				<a>热搜:</a>
				<span> <a href="javascript:;" onclick=searchfunc("Timeline")> Timeline </a> 
				</span> <span> <a href="javascript:;" onclick=searchfunc("Airframe")> Airframe </a> 
				</span> <span> <a href="javascript:;" onclick=searchfunc("Downtown")>Downtown</a> </span>
            </div>
       </div>

	<div id="c"></div>
</div>
</body>
</html>